<template>
    <div class="index">
       <!-- <header>
            <van-nav-bar title="知行互助"/>
        </header>-->
        <van-swipe indexSwipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in imgList" :key="index">
                <img @click="gotoUrl(image.link)" v-lazy="image.url" />
            </van-swipe-item>
        </van-swipe>
        <div class="note">
            <van-notice-bar :text="text" left-icon="/img/note.png" mode="closeable"/>
        </div>
        <div>
            <div skills-class>
                <div @click="tmpFn()">
                    <img src="/img/skills-all.png" alt="">
                    <p>全部兼职</p>
                </div>
                <div @click="tmpFn()">
                   <img src="/img/offline-part-time.png" alt="">
                   <p>线下兼职</p>
               </div>
                <div @click="tmpFn()">
                   <img src="/img/skills-part-time.png" alt="">
                   <p>技能兼职</p>
               </div>
                <div @click="tmpFn()">
                   <img src="/img/online-part-time.png" alt="">
                   <p>悬赏互助</p>
               </div>
            </div>

        </div>
        <div class="task-list">
            <div class="hot">24小时热榜</div>
            <router-link v-for="(item,index) in taskInfo" :key="index" :to="{name:'task_detail',query:{task_id:item.task_id}}" tag="div" class="box">
                <div class="task-top">
                    <h4>{{item.task_title}}</h4>
                    <div class="right">
                        <span>¥</span>
                        <span class="number_font">{{item.task_cash | formatNum}}</span>
                    </div>
                </div>
                <div class="addr-time">
                    <span>{{item.task_addr}}</span>
                    <span>{{item.createdAt}}</span>
                </div>
                <div class="tag"><span>{{item.tag}}</span></div>
                <div>
                    <i class="zx-icon dot dot1">&#xe6cf;</i>
                    <span class="text">要求：</span>
                    <span class="con">{{item.task_require}}</span>
                </div>
                <div>
                    <i class="zx-icon dot dot2">&#xe6cf;</i>
                    <span class="text">周期：</span>
                    <span class="con">{{item.task_cycle}}</span>
                </div>
                <div class="settext">
                    <i class="zx-icon dot dot3">&#xe6cf;</i>
                    <span class="text">描述：</span>
                    <span class="con con3">{{item.task_des}}</span>
                </div>
                <div class="conpany-info">
                    <img :src="item.headimgurl" alt="">
                    <div>
                        <h5>{{item.company_name?item.company_name:item.nickname}}</h5>
                        <span>{{item.type==0?'个人任务':'企业任务'}}</span>
                    </div>
                </div>
            </router-link>

        </div>
    </div>
</template>
<script>
    import Vue from "vue";
    import { Swipe, SwipeItem, Row, Col, Icon, Lazyload,NoticeBar} from "vant";
    Vue.use(Swipe);
    Vue.use(SwipeItem);
    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Icon);
    Vue.use(Lazyload, {});
    Vue.use(NoticeBar);
    export default {
        components: {
            Swipe,
            SwipeItem,
            Row,
            Col,
            Icon
        },
        created(){
            this.init();
          document.body.style.backgroundColor='#eff3f6'
            // document.body.css.paddingBottom='100px'
        },
        data() {
            return {
                count: 0,
                isLoading: false,
                taskInfo:[],
                text:'知行兼职新版上线啦;欢迎小伙伴们来尝鲜哦;欢迎小伙伴们给我提宝贵意见',
                imgList: [
                    {
                        url: "/img/qsmy101.jpg",
                        link: "https://mp.weixin.qq.com/s/007Lyb2Wb438riSPbgf0Vg"
                    },
                    {
                        url: "/img/qsmy102.jpg",
                        link: "https://mp.weixin.qq.com/s/3PZ_L-LXTHUPUg05Q4T1Gw"
                    },
                    {
                        url: "/img/qsmy100.jpg",
                        link: "#"
                    }
                ]
            };
        },
        methods: {
            gotoUrl(link) {
                window.location.href = `${link}?${new Date().getTime()}`;
            },
            init(){
                this.$post('/api/task/index').then(res=>{
                    if(res.data.err_code ==0){
                        console.log(res.data.data)
                        this.taskInfo = res.data.data;
                    }else{
                        this.$toast({message:res.data.err_msg})
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            tmpFn(){
                this.$toast({message: '即将开放,敬请期待'})
            }
        }
    };
</script>

<style lang="less" scoped>
    .van-swipe {
    img {
        height: 150px;
        width: 100%;
    }
    }
    .demo-color-btn {
        margin: 8px;
    }
    [skills-class] {
        padding-top: 10px;
        padding-bottom: 10px;
        background: #fff;
        display: flex;
    div {
        flex: 1;
        text-align: center;
    img {
        height: 50px;
        width: 50px;
    }
    p{
        font-size: 18px;
        color: #222;
    }
    }

    }
    @import "../../public/css/task-list.less";
    .task-list .box{
        margin-left: 0;
        margin-right: 0;
    }
</style>

